Fork me on GitHub

jQuery 笔记

发表于 | 分类于 ， | 热度: °C
字数统计: 3,354 | 阅读时长 ≈ 14

前言：

  1. jQuery 笔记；

一、jQuery 介绍

jQuery 的口号和愿望：Write Less, Do More（写得少，做得多）

1. 特点
    - jQuery 是一个 JavaScript 库。
    - jQuery 极大地简化了 JavaScript 编程。
    - jQuery 很容易学习。

2. 网站
    - http://jquery.com/ 官方网站
    - https://code.jquery.com/ 版本下载

二、jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： 
    $(selector).action()

    1. 美元符号定义 jQuery
    2. 选择符（selector）"查询"和"查找" HTML 元素
    3. action() 执行对元素的操作
    
实例:
    $(this).hide() - 隐藏当前元素
    $("p").hide() - 隐藏所有 <p> 元素
    $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
    $("#test").hide() - 隐藏所有 id="test" 的元素

三、jQuery 函数入口


1. jQuery 入口函数:
    <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            // 执行代码
        });
        或者
        $(function(){
            // 执行代码
        });
    </script>

2. JavaScript 入口函数:
    <script type="text/javascript">
        window.onload = function () {
            // 执行代码
        }
    </script>

3. jQuery 入口函数与 JavaScript 入口函数的区别：

    1. jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
    2. JavaScript 的 window.onload 事件是等到所有内容，
    包括外部图片之类的文件加载完后，才会执行。

四、jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

1. jQuery 元素选择器
    jQuery 使用 CSS 选择器来选取 HTML 元素。
    
    $("p") 选取 <p> 元素。
    
    $("p.intro") 选取所有 class="intro" 的 <p> 元素。
    
    $("p#demo") 选取所有 id="demo" 的 <p> 元素。

2. jQuery 属性选择器
    jQuery 使用 XPath 表达式来选择带有给定属性的元素。
    
    $("[href]") 选取所有带有 href 属性的元素。
    
    $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
    
    $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
    
    $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

更多实例

语法 描述
$(“*”) 选取所有元素
$(this) 选取当前 HTML 元素
$(“p.intro”) 选取 class 为 intro 的 <p> 元素
$(“p:first”) 选取第一个 <p> 元素
$(“ul li:first”) 选取第一个 <ul> 元素的第一个 <li> 元素
$(“ul li:first-child”) 选取每个 <ul> 元素的第一个 <li> 元素
$(“[href]”) 选取带有 href 属性的元素
$(“a[target=’_blank’]”) 选取所有 target 属性值等于 “_blank” 的 <a> 元素
$(“a[target!=’_blank’]”) 选取所有 target 属性值不等于 “_blank” 的 <a> 元素
$(“:button”) 选取所有 type=”button” 的 <input> 元素 和 <button> 元素
$(“tr:even”) 选取偶数位置的 <tr> 元素
$(“tr:odd”) 选取奇数位置的 <tr> 元素
$(“div#intro .head”) id=”intro” 的 <div> 元素中的所有 class=”head” 的元素

注意：

  1. 同一级的元素不需要加 ‘ ‘ 空格隔开
  2. $(“:button”) 为 jQuery 中表单选择器（貌似与过滤选择器同级），旨在选择所有的按钮，所以会找到 <input>、<button> 元素；而 $(“button”) 则为基本选择器，旨在选择为 <button> 的标签。
  3. : 即为 jQuery 的过滤选择器，语法类似于 css 中的伪类选择器；其过滤选择器大概可以分为基本过滤（p:first 之类）、内容过滤（:empty）、子元素过滤（:first-child）和属性过滤 [href] 选择器。

五、jQuery 集过滤选择器

1. $('div').has('p'); 
    选择包含 p 元素的 div 元素
    
2. $('div').eq(5); 
    eq 是选择第几个元素。从父级数下来第几个，从 0 开始数数，最终出来只有一个被选中
    
    $('div h2').eq(2); // 选择 div 中第 3 个 h2 元素

六、jQuery 亲戚选择器

1. $('#box').prev(); - 选择上一个兄弟

2. $('#box').prevAll(); - 选择上面所有的兄弟

3. $('#box').next(); - 选择下面一个兄弟

4. $('#box').nextAll(); - 选择下面所有的兄弟

5. $('#box').parent(); - 选择父级
    $('#box').parent('div'); - 只选中 div 父级
    
6. $('#box').children(); - 选择所有的子级
    $('#box').children('span'); - 只选中 span 孩子
    
7. $('#box').siblings(); - 选择所有的兄弟
    $('#box').siblings('p'); - 只选中 p 兄弟

8. $('#box').find('.myClass'); - 选择 class 等于 myClass 的元素

七、jQuery 获取并设置 CSS 类

1. jQuery 操作 css

    addClass() - 向被选元素添加一个或多个类
    removeClass() - 从被选元素删除一个或多个类
    toggleClass() - 对被选元素进行添加/删除类的切换操作
    css() - 设置或返回样式属性

2. css() 方法

    css() 方法设置或返回被选元素的一个或多个样式属性
    
    1. 返回 CSS 属性
        语法：css("propertyname");
    
        $("p").css("background-color");
    
    2. 设置 CSS 属性
        语法：css("propertyname","value");
        
        $('p').css('background-color','red');
    
    3. 设置多个 CSS 属性
        语法：css({"propertyname":"value","propertyname":"value",...});
        
        $('p').css({'color': 'red', 'background': 'white'});
        
3. scrollTop() 方法
    
    返回或设置匹配元素的滚动条的垂直位置
    
    $('div').scrollTop('9999999999999999999999999')

八、jQuery 动画

1. animate() 动画
    可以让 CSS 属性进行过度，多少毫秒之内完成
    不是什么属性都能过度，带有数字的才能过度
    
    /*
        animate参数：
        参数一：要改变的样式属性值，写成字典的形式
        参数二：动画持续的时间，单位为毫秒，一般不写单位
        参数三：动画曲线，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动
        参数四：动画回调函数，动画完成后执行的匿名函数
    */
    
    $('div').animate({
        width: '300px',
        'background':'yellow',
        'color':'blue',
        
        // 使用相对值，需要在值的前面加上 += 或 -=
        left: '+=150px',
        
        // 使用预定义的值："show"、"hide" 或 "toggle"
        height:'toggle'
    },1000,'swing',function(){
        alert('done!');
    });
    
    // 分步动画，走完一步，再走另外一步
	// 分开多个 animate 去书写，就可以做到分步动画
	$('div').animate({'width':'500px'},1000)
	.animate({'height':'500px'},1000)
	.animate({'font-size':'300px'},1000)
	.animate({'border-radius':'500px'},1000)


2. css3 背景属性过渡
    <style>
		div{
			width: 500px;
			height: 500px;
			background: pink;
			position: absolute;
			left: 0;
			top: 0;
			transition: all 2s; /* CSS3 的过渡属性，有这个属性，那么 hover 的时候就会有过渡效果 */
		}
		div:hover{
			background: blue;
			font-size: 300px;
			left: 300px;
			transform: scale(1.4) rotate(360deg) skew(30deg);
		}
	</style>
	
3. stop() 停止动画
    解决 JQ 动画类的效果，排队机制问题。一定要加在动画效果前面，中间不能有其他元素
    $('div').stop().animate()

九、jQuery 效果

隐藏、显示、切换，滑动，淡入淡出

    1. fadeIn(speed, callback) 淡入
        $btn.click(function(){
            $('#div1').fadeIn(1000, 'swing', function(){
                alert('done!');
            });
        });
    2. fadeOut() 淡出
    3. fadeToggle() 切换淡入淡出
    
    4. hide() 隐藏元素 // hide(1000) 加了时间，会带有动画效果
    5. show() 显示元素
    6. toggle() 切换元素的可见状态
    
    7. slideDown() 向下展开 // 如果图片要做卷起展开的效果，要加上宽高
    8. slideUp() 向上卷起
    9. slideToggle() 依次展开或卷起某个元素

十、jQuery 链式调用

jquery 对象的方法会在执行完后返回这个 jquery 对象，所有 jquery 对象的方法可以连起来写：

    $('#div1').children('ul') // 该元素下面的 ul 子元素
    .slideDown('fast') // 高度从零变到实际高度来显示 ul 元素
    .parent()  // 跳到 ul 的父元素，也就是 id 为 div1 的元素
    .siblings()  // 跳到 div1 元素平级的所有兄弟元素
    .children('ul') // 这些兄弟元素中的 ul 子元素
    .slideUp('fast');  // 高度实际高度变换到零来隐藏 ul 元素

十一、jQuery 内容、属性操作

1、html() 取出或设置 html 内容

    1. 取出 html 内容
        var $htm = $('#div1').html();
    
    2. 设置 html 内容
        $('#div1').html('<span>添加文字</span>');

2、prop() 取出或设置某个属性的值

    1. 取出图片的地址
        var $src = $('#img1').prop('src');

    2. 设置图片的地址和 alt 属性
        $('#img1').prop({src: "test.jpg", alt: "Test Image" });
        
    3. val() 取出或设置 value 值简写方法
        1. 设置 value
        $('input').prop({'value':'123'})
		$('input').val('123')
		
		2. 获取 value
		$('input').prop('value')
		$('input').val()

十二、jQuery 事件

1、jQuery 是为事件处理特别设计的。

2、什么是事件？

    页面对不同访问者的响应叫做事件。
    
    事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

3、事件函数列表：
    
    1. click() 鼠标单击
        <script type="text/javascript">
    		$('h1').click(function(){
            	// $(this) 代表当前事件源
    			$(this).css({'color':'red'})
    			
    			// 来回切换类名
    			$(this).toggleClass('red')
    			
    			// 能够输出我当前点击的是第几个索引值
    			alert($(this).index())
    		})
    	</script>
    
    2. blur() 元素失去焦点
    3. focus() 元素获得焦点
        // 搜索框提示功能：
        /*
    		placeholder  HTML5 的属性
    		有兼容性问题：IE8 以下的浏览器都不支持这个功能
    		HTML5 和 CSS3  都是不支持 IE8 以下的浏览器的
    	*/
        <input type="text" placeholder="请输入名字" <!--value="请输入名字"--> />

    4. mouseover() 鼠标进入（进入子元素也触发）
    5. mouseout() 鼠标离开（离开子元素也触发）
    6. mouseenter() 鼠标进入（进入子元素不触发）
    7. mouseleave() 鼠标离开（离开子元素不触发）
    8. hover() 同时为 mouseenter 和 mouseleave 事件指定处理函数
    
		$('input').hover(function(){
			// 第一个 function，里面是代表移入事件
			$(this).val('移入')
		},function(){
			// 第二个 function，里面是代表移出事件
			$(this).val('移出')
		})

    9. ready() DOM 加载完成
        $(document).ready(function(){
            //  jQuery 入口函数
        })

    10. submit() 用户递交表单
        // 表单提交事件，必须要选择 form 标签才能够做提交
		// .submit()，专门给 form 表单做提交事件的
		
		$('form').submit(function(){
		    // 表单提交
		})
	
	11. change() 当元素的值改变时发生 change 事件（仅适用于表单字段）
	    注意：当用于 select 元素时，change 事件会在选择某个选项时发生。
	    当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生。
	    
	    $("select").change(function(){
            alert("文本已被修改");
        });
        
    12. keydown()
    
		oInput.keydown(function(event) {
			if(event.keyCode == 13) {
				alert("点击回车");
			}
		})

常见的 DOM 事件：

鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload

十三、表单验证

1、正则写法
    var re = new RegExp('规则', '可选参数');
    var re = /规则/参数;
    
2、修饰参数
    g：global，全文搜索，默认搜索到第一个结果接停止
    i：ingore case，忽略大小写，默认大小写敏感

3、常用函数
    test()
    用法：正则.test(字符串) 匹配成功，就返回真，否则就返回假

4、常用正则规则
    //用户名验证：(数字字母或下划线 6 到 20 位)
    var reUser = /^\w{6,20}$/;
    
    //邮箱验证：        
    var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;
    
    //密码验证：
    var rePass = /^[\w!@#$%^&*]{6,20}$/;
    
    //手机号码验证：
    var rePhone = /^1[34578]\d{9}$/;
    
5、课堂案例
    var reg1 = /\d/    // 全局查找，只要里面有数字就是 true
	var reg2 = /^\d+$/  // 前端验证，都要加上开始跟结束。因为这样更加严格
	
	var str1 = '123'
		
	// 正则.test(验证的数据)   成立：true   失败：false
	// 前端的正则是不管你什么数据类型的，'123' 等于 123
	reg2.test(str1)

正则笔记：正则表达式

十四、事件冒泡

1. 事件冒泡：当子级写了事件，长辈也写了事件，当你触发子级的时候，长辈也会触发事件

2. 事件冒泡的作用
    事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），
    它还可以让你在对象层的不同级别捕获事件。
    
    对象层次的最顶层，即 document 对象（有些浏览器是 window ）。
    
    $(window).click(function(){
		alert('window 的子级点击时都会触发该事件')
	})

3. 阻止冒泡和阻止默认行为

    // event.stopPropagation();
    // event.preventDefault();
    
    // 合并写法：
    return false;
    
    $('#btn').click(function(){
        // return false; 两个作用：1.阻止表单提交；2.阻止事件冒泡
        return false
    })

十五、Dom 操作

1. Dom 操作也叫做元素节点操作，它指的是改变 html 的标签结构，它有两种情况：
    1、移动现有标签的位置
    2、将新创建的标签插入到现有的标签中

2. 移动或者插入标签的方法

    1、append() 和 appendTo()：在现存元素的内部，从后面放入元素（子级关系）
    
        // append()
        var span = '<span>这是一个span元素</span>';
        $('#div1').append(span);
        
        // 如果要使用 appendTo() 节点要保存成下面这种方法
        var $span = $('<span>这是一个span元素</span>');
		$span.appendTo($('#div1'))
        
    2、prepend() 和 prependTo()：在现存元素的内部，从前面放入元素（子级关系）
    
    3、after() 和 insertAfter()：在现存元素的外部，从后面放入元素（兄弟关系）
    
    4、before() 和 insertBefore()：在现存元素的外部，从前面放入元素（兄弟关系）

3. 删除标签

    $('#div1').remove();

十六、事件委托

1. 事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，
    事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

2. 一般绑定事件的写法

    $(function(){
        $ali = $('#list li');
        $ali.click(function() {
            $(this).css({background:'red'});
        });
    })
    ...
    <ul id="list">
        <li>1</li>
        <li>2</li>
    </ul>
    
3. 事件委托的写法

    $(function(){
        $list = $('#list');
        $list.delegate('li', 'click', function() {
            $(this).css({background:'red'});
        });
    })
    ...
    <ul id="list">
        <li>1</li>
        <li>2</li>
    </ul>
    
4. 事件委托选择问题
    
    取出某一个不一样的点进行判断
    1. 根据类名判断
        if($(this).prop('class') == 'aa'){
			alert('弹窗')
		}else if($(this).prop('class') == 'bb'){
			alert($(this).index())
		}else{
			alert($(this).html())
		}
    2. 根据内容判断
        if($(this).html() == '弹窗'){
			alert('弹窗')
		}else if($(this).html() == '弹索引值'){
			alert($(this).index())
		}else{
			alert($(this).html())
		}
    
注意：
    1. 动态添加的结构，是不能写事件的。因为找不到新添加的结构。
    2. 只要数据是动态添加的，都要用事件委托的写法去写事件。

更多参考：W3school - jQuery 教程

-------------本文结束感谢您的阅读-------------

本文标题:jQuery 笔记

文章作者:曹永林

发布时间:2018年08月03日 - 09:08

最后更新:2018年08月13日 - 18:08

原始链接:http://jovelin.cn/2018/08/03/jQuery 笔记/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。